import { Typography } from 'antd'
import React from 'react'
import { QuestionInfoDefaultProps, QuestionInfoPropsType } from './interface'

const Component: React.FC<QuestionInfoPropsType> = props => {
  const { title = '', desc = '' } = { ...QuestionInfoDefaultProps, ...props }

  const descTextList = desc.split('\n')
  return (
    <div style={{ textAlign: 'center' }}>
      <Typography.Title style={{ fontSize: '24px' }}>{title}</Typography.Title>
      <Typography.Paragraph>
        {descTextList.map((desc, index) => {
          return (
            <span key={index}>
              {index > 0 && <br />}
              {desc}
            </span>
          )
        })}
      </Typography.Paragraph>
    </div>
  )
}

export default Component
